<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.imga{
				animation: dfc .5s linear infinite;
				
			}
			/* 关键帧 */
			@keyframes dfc{
				0%{
					transform: rotatey(180deg);
				}
				30%{
					transform: rotatey(360deg);
				}
				100%{
					transform: rotateY(720deg);
				}
			}
			.imgb{
				animation: dfca .7s linear infinite;
			}
			@keyframes dfca{
				0%{
					transform: translateX(100px) rotate(180deg);
				}
				20%{
					transform: translateX(200px) rotate(360deg);
				}
				40%{
					transform: translateY(300px) rotate(450deg);
				}
				60%{
					transform: translateY(700px) rotate(570deg);
				}
				80%{
					transform: translateX(-200px) rotate(570deg);
				}
				100%{
					transform: translateX(-200px) rotate(720deg);
				}
			}
		</style>
	</head>
	
	<body>
		<img src="../img/2.gif" alt="" />
		<audio src="../dafengche.mp3" autoplay></audio>
		<button id="btn1">开转</button>
		<button id="btn2">暂停</button>
		<button id="btn3">反转</button>
		
		<script>
			$("#btn1").click(function(){
				$("img").attr("src","../img/dfc.jpg").addClass("imga");
			});
			$("#btn2").click(function(){
				$("audio").removeAttr("src");
				$("img").removeClass("imga");
			});
			$("#btn3").click(function(){
				$("audio").attr("src","../dafengche.mp3");
				$("img").toggleClass("imgb");
			});
		</script>
	</body>
</html>